<template>
  <section class="firm-manage" v-cloak>
    <div class="info-title"><span class="icon"></span>升级包管理</div>
    <form @keyup.enter="search" @submit.prevent>
      <el-row class="search-box">
        <el-col :span="24">
          <label for="" class="choose">
            <span>升级包名称：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入升级包名称" v-model.trim="form.name" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>升级包版本号：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入版本号" v-model.trim="form.version" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>升级包类型：</span>
            <el-select v-model="form.type" size="small" class="width200" placeholder="请选择升级包类型">
              <el-option label="整包" :value="1"></el-option>
              <el-option label="差分" :value="2"></el-option>
            </el-select>
          </label>
          <label for="" class="choose">
            <span>创建时间：</span>
            <el-date-picker v-model="form.Timepicker[0]" type="date" size="small"  class="width150" placeholder="请选择时间" :picker-options='dateTstart'></el-date-picker>
            &nbsp;至&nbsp;
            <el-date-picker v-model="form.Timepicker[1]" type="date" size="small"  class="width150" placeholder="请选择时间" :picker-options='dateTend'></el-date-picker>
          </label>
          <label for="" class="choose">
            <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
          </label>
        </el-col>
      </el-row>
    </form>
    <el-row class="title">
      <el-button class="titleright" type="primary" size="small" @click="addFirm" v-resetClick>新增升级包</el-button>
    </el-row>
    <el-row class="data-list">
      <ctable :isLoading="isLoading"  :thead="thead" :table-data="lists" :options="options" :page-data="pageObj" all-align="center"></ctable>
    </el-row>
    <el-dialog :title="ruleForm.id ? '编辑升级包' : '新增升级包'" :visible.sync="isDialogShow" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" width="40%" custom-class="customWidth">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="升级包名称:" :label-width="formLabelWidth" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off" style="width: 350px;" placeholder="请输入升级包名称"></el-input>
        </el-form-item>
        <el-form-item label="升级包类型:" :label-width="formLabelWidth" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="2">差分</el-radio>
            <el-radio :label="1">整包</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模块:" :label-width="formLabelWidth" prop="module">
          <el-select v-model="ruleForm.module" placeholder="请选择接口名称"  class="width200">
            <el-option v-for="(item, index) in moduleArr" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="升级包版本号:" :label-width="formLabelWidth" prop="new_version">
          <el-input v-model="ruleForm.new_version" autocomplete="off" style="width: 350px;" placeholder="请输入升级包版本号"></el-input>
        </el-form-item>
        <el-form-item label="升级前版本号:" :label-width="formLabelWidth" prop="old_version" v-if="ruleForm.type === 1">
          <el-input v-model="ruleForm.old_version" autocomplete="off" style="width: 350px;" placeholder="请输入升级前版本号"></el-input>
        </el-form-item>
        <el-form-item label="上传方式:" :label-width="formLabelWidth">
          <el-radio-group v-model="ruleForm.upload_type">
            <el-radio :label="1">手动上传</el-radio>
            <el-radio :label="2">文本路径</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="升级包:" :label-width="formLabelWidth" prop="file" v-if="ruleForm.upload_type === 2">
          <el-input v-model="ruleForm.file" autocomplete="off" style="width: 350px;" placeholder="请输入升级包"></el-input>
        </el-form-item>
        <el-form-item label="升级包:" :label-width="formLabelWidth" prop="file" v-if="ruleForm.upload_type === 1">
          <div style="display: flex;align-items: center;" v-if="ruleForm.name">
            <el-upload :on-change="handlePreview" :auto-upload="false" :show-file-list="false">
              <el-button type="primary">上传升级包</el-button>
            </el-upload>
          </div>
          <el-button type="primary" disabled v-else>上传升级包</el-button>
        </el-form-item>
        <div style="display: flex;flex-direction: column; padding-left: 30px;padding-bottom: 30px;" v-if="ruleForm.file && ruleForm.upload_type === 1">
          <div style="display: flex;align-items: center;">
            <span style="padding-right: 20px;padding-left: 90px;line-height: 30px;font-size: 14px;font-weight: 600;max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{fileName || ruleForm.file}}</span><i class="el-icon-close" @click="delfile"></i>
          </div>
        </div>
        <el-form-item label="升级包(备用):" :label-width="formLabelWidth" v-if="ruleForm.upload_type === 2">
          <el-input v-model="ruleForm.file1" autocomplete="off" style="width: 350px;" placeholder="请输入升级包(备用)"></el-input>
        </el-form-item>
        <el-form-item label="升级包(备用):" :label-width="formLabelWidth" v-show="ruleForm.upload_type === 1">
          <div style="display: flex;align-items: center;" v-if="ruleForm.name">
            <el-upload :on-change="handlePreview1" :auto-upload="false" :show-file-list="false">
              <el-button type="primary">上传升级包</el-button>
            </el-upload>
          </div>
          <el-button type="primary" disabled v-else>上传升级包</el-button>
        </el-form-item>
        <div style="display: flex;flex-direction: column; padding-left: 30px;padding-bottom: 30px;" v-if="ruleForm.file1 && ruleForm.upload_type === 1">
          <div style="display: flex;align-items: center;">
            <span style="padding-right: 20px;padding-left: 90px;line-height: 30px;font-size: 14px;font-weight: 600;max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{fileName1 || ruleForm.file1}}</span><i class="el-icon-close" @click="delfile1"></i>
          </div>
        </div>
        <el-form-item label="备  注:" :label-width="formLabelWidth" prop="remarks">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入备注" v-model="ruleForm.remarks" autocomplete="off" style="width: 350px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm('ruleForm', 2)">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm', 1)">确 定</el-button>
      </div>
    </el-dialog>
    <update-cecord v-if="isUpdateCecord" @beforeCloseEven="beforeCloseEven" :updateObj="updateObj"></update-cecord>
    <my-batch-update v-if="isBatchUpdate" @batchUpdateEvenr="batchUpdateEvenr" :updateObj="updateObj"></my-batch-update>
  </section>
</template>
<script>
import { upgradelist, upgradeadd, upgradeupdate, commonfileupload, upgradedeldel, modulelist } from 'api/txEquipment/index'
import ctable from 'components/common/ctable'
import updateCecord from 'components/updateCecord'
import common from 'src/util/common.js'
import myBatchUpdate from 'components/myBatchUpdate'
import { vueTimeFormat } from 'src/filter/index'
export default {
  data () {
    // let year = new Date().getFullYear()
    // let month = new Date().getMonth()
    // let dataV = new Date().getDate()
    // let startDate = new Date(year, month, dataV - 7)
    // let endDate = new Date(year, month, dataV)
    return {
      dateTstart: {
        disabledDate: time => {
          return (
            time.getTime() > (this.form.Timepicker[1] || Date.now())
          )
        }
      },
      dateTend: {
        disabledDate: time => {
          return (
            time.getTime() > Date.now() || time.getTime() < (this.form.Timepicker[0] || (Date.now() - 8.64e7))
          )
        }
      },
      isBatchUpdate: false,
      isDialogShow: false,
      formLabelWidth: '120px',
      formLabelWidth2: '60px',
      ruleForm: {
        name: '',
        type: 2,
        new_version: '',
        module: '',
        upload_type: 1,
        old_version: '',
        file: '',
        file1: '',
        remarks: ''
      },
      form: {
        name: '',
        version: '',
        type: '',
        Timepicker: [] // [new Date(startDate), new Date(endDate)] // 缴费日期
      },
      formObj: {},
      rules: {
        name: [
          { required: true, message: '请输入升级包名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择升级包类型', trigger: 'change' }
        ],
        new_version: [
          { required: true, message: '请输入升级包版本号', trigger: 'blur' }
        ],
        module: [
          { required: true, message: '请选择模块', trigger: 'change' }
        ],
        old_version: [
          { required: true, message: '请输入升级前版本号', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请上传(输入)升级包', trigger: 'change' }
        ],
        // file1: [
        //   { required: true, message: '请上传升级包', trigger: 'change' }
        // ],
        remarks: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      isUpdateCecord: false,
      shopName: '', // 厂商名称
      lists: [], // 数据列表,
      thead: [{ // ctable组件头
        name: '升级包名称',
        prop: 'name'
      }, {
        name: '升级包类型',
        prop: 'typename'
      }, {
        name: '升级包版本号',
        prop: 'new_version'
      }, {
        name: '创建时间',
        prop: 'created'
      }, {
        name: '模块',
        prop: 'module'
      }, {
        name: '备注',
        prop: 'remarks'
      }],
      options: [{
        name: '编辑',
        callback: this.editFirm
      }, {
        name: '删除',
        callback: this.delEvemt
      }, {
        name: '批量升级',
        callback: this.batchEven
      }, {
        name: '升级记录',
        callback: this.record
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      updateObj: {},
      fileName: '',
      fileName1: '',
      moduleArr: []
    }
  },
  created () {
    this.fileName = ''
    this.fileName1 = ''
    this.filterObjEvemt()
    modulelist().then(res => {
      this.moduleArr = res.data
    })
  },
  components: {
    ctable,
    updateCecord,
    myBatchUpdate
  },
  methods: {
    beforeCloseEven () {
      this.isUpdateCecord = false
    },
    batchUpdateEvenr (obj) {
      if (obj.type === 1) {
        this.filterObjEvemt()
      }
      this.isBatchUpdate = false
    },
    handlePreview (file) {
      var formFile = new FormData()
      this.fileName = file.raw.name
      formFile.append('file', file.raw)
      formFile.append('name', this.ruleForm.name)
      commonfileupload(formFile).then(res => {
        this.ruleForm.file = res.data || ''
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      })
    },
    handlePreview1 (file) {
      var formFile = new FormData()
      this.fileName1 = file.raw.name
      formFile.append('file', file.raw)
      formFile.append('name', this.ruleForm.name)
      commonfileupload(formFile).then(res => {
        this.ruleForm.file1 = res.data || ''
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      })
    },
    delfile (index) {
      this.ruleForm.file = ''
      this.fileName = ''
      this.$refs.ruleForm.validateField('file')
    },
    delfile1 (index) {
      this.ruleForm.file1 = ''
      this.fileName1 = ''
      this.$refs.ruleForm.validateField('file')
    },
    submitForm (formName, num) {
      if (num === 1) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let pan = JSON.parse(JSON.stringify(this.ruleForm))
            if (pan.id) {
              upgradeupdate(pan).then(res => {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.isDialogShow = false
                this.getData(1)
              })
            } else {
              if (pan.type === 2) pan.old_version = undefined
              upgradeadd(pan).then(res => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.isDialogShow = false
                this.getData(1)
              })
            }
          }
        })
      } else {
        this.$refs[formName].resetFields()
        this.isDialogShow = false
      }
    },
    getData (int) { // 获取数据
      upgradelist({
        pageIndex: int - 1,
        pageSize: 10,
        ...this.formObj
      }).then(res => {
        res.data && res.data.forEach(oo => {
          oo.typename = oo.type === 1 ? '整包' : '差分'
        })

        this.lists = res.data || []
        this.pageObj.page = res.page
      })
    },
    search () {
      this.filterObjEvemt()
    },
    // 新增厂商
    addFirm () {
      this.ruleForm = {
        name: '',
        type: 2,
        new_version: '',
        old_version: '',
        module: '',
        upload_type: 1,
        file: '',
        file1: '',
        remarks: ''
      }
      this.isDialogShow = true
    },
    // 编辑厂商
    editFirm (data) {
      this.ruleForm = {
        id: data.id,
        name: data.name || null,
        type: data.type || null,
        new_version: data.new_version || null,
        old_version: data.old_version || null,
        upload_type: data.upload_type || 1,
        module: data.module || '',
        file: data.file || '',
        file1: data.file1 || '',
        remarks: data.remarks || null
      }
      this.isDialogShow = true
    },
    record (data) {
      this.updateObj = data
      this.isUpdateCecord = true
    },
    batchEven (data) {
      this.updateObj = data
      this.isBatchUpdate = true
    },
    // 删除
    delEvemt (data) {
      this.$confirm('是否删除该升级包？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        upgradedeldel({id: data.id}).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData(1)
        })
      }).catch(() => {
      })
    },
    vueTimeFormats (value) {
      return vueTimeFormat(value, 'yyyy-MM-dd')
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'Timepicker':
            if (this.form.Timepicker.length && this.form.Timepicker[0] && this.form.Timepicker[1]) {
              obj.start_time = this.vueTimeFormats(parseInt(common.div((new Date(this.form.Timepicker[0])).getTime(), 1000)))
              obj.end_time = this.vueTimeFormats(parseInt(common.div((new Date(this.form.Timepicker[1])).getTime(), 1000)))
            }
            break
          default:
            obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    }
  }
}
</script>
<style lang="less">
  .itemBoxName .el-form-item__error{
    z-index: 100;
    top: 60%;
  }
  .firm-manage {
    .customWidth{
      min-width: 560px;
    }
  }
</style>
<style lang="less" scoped>
.firm-manage {
  .width200{width: 200px;}
  .width150{width: 150px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
}
</style>
